.mainWraper {
    display: flex;
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(103, 180, 252);
    border-radius: 15px;
    transition: opacity 0.2s, width 1s;

    .inputArea {
        flex: none;
        width: 307px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: width 1s;
        .inputWrap {
            width: 100%;
            .textarea {
                border-radius: 10px;
                margin: 0 20px;
                width: calc(100% - 20px);
                resize: none;
                overflow: hidden;
            }
        }
    }

    .inputAreaFocus {
        transition: width 1s;
        width: 0;
        overflow: hidden;
    }

    .timerWrap {
        flex: 1 1 auto;
        height: 100%;
        min-width: 180px;

        .clockWrap {
            flex: auto;
        }
    
        .buttonWrap {
            flex: none;
            display: flex;
            justify-content: center;
            width: 100%;
            height: 30px;
        }
    
        .button {
            cursor: pointer;
            margin: 0 10px;
        }
    }
}

.mainWraperBlur {
    opacity: 0.2;
    width: 248px;
    transition: opacity 1s, width 1s;
}